<template>
  <div class="bottom-nav">
    <ul>
        <li><router-link exact to="/message"><i class='iconfont'>&#xe66e;</i><span>消息</span></router-link></li>
        <li><router-link to='/work'><i class='iconfont'>&#xe7f8;</i><span>工作</span></router-link></li>
        <li><router-link to='/list'><i class='iconfont'>&#xe604;</i><span>通讯录</span></router-link></li>
        <li><router-link to='/mine'><i class='iconfont'>&#xe663;</i><span>我的</span></router-link></li> 
    </ul> 
  </div>
</template>

<script>
export default {
  name: 'BottonNav',
  data () {
    return {
  
    }
  }
}
</script>


<style lang="less" scoped>
.bottom-nav{
    width: 100%;
    height: 120/75rem;
    background-color:#f1f1f1;
    position:fixed;
    bottom: 0px;left: 0px;
    box-shadow: 0px 0px 0px 1px #e1e1e1;
    overflow: hidden;
    width: 100%;
    
    ul{
      width:100%;
      overflow: hidden;
      padding: 5px 0;
      li{
        float: left;
        width: 25%;
        text-align: center;
       a{
         display: block;
         line-height: 40/75rem;
       }
        i{
          line-height: 40/75rem;
          font-size:40/75rem 
        }
        span{
          display: block;
          font-size: 30/75rem;
        }
      }
    }
      
}

  .router-link-active{
    color:rgb(48, 145, 242);
    span{
        color:rgb(48, 145, 242);
    }
  }
</style>
